<!DOCTYPE html>
<html lang='zh-cn'>
<head>
    <meta charset='UTF-8'>
    <meta name='description' content=''>
    <meta name='keywords' content=''>
    <meta name='viewport' content='width=device-width, initial-scale=1.0,user-scalable=no'>
    <title>滑动删除</title>
    <script src="./js/rem.js"></script>
    <script src="./js/touch.js"></script>
    <style>
        *{padding: 0;margin: 0;}
        body{
            font-size: 0.16rem;
        }
        #box{
            margin: 0 auto;
            overflow: hidden;
        }
        .tit{
            position: relative;
            left: 0;
            width: 100%;
            border-bottom: 1px dashed #ccc;
            transition: all .3s;
            transform-origin: top;
        }
        
        p{
            width: 100%;
            text-indent: 2em;
            line-height: 0.6rem;
            font-size: 0.2rem;
        }
        a{
            position: absolute;
            top: 0;
            right: 0;
            width: 1rem;
            height: 100%;
            text-align: center;
            line-height: 0.6rem;
            background-color: red;
            color: white;
            text-decoration: none;
            transform: translate(100%);
        }
        button{
            float: right;
            margin-top: 0.2rem;
            margin-right: 0.2rem;
            width: 0.8rem;
            height: 0.5rem;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="tit">
            <p>短信标题1</p>
            <a href="javascript:;">删除</a>
        </div>
        <div class="tit">
            <p>短信标题2</p>
            <a href="javascript:;">删除</a>
        </div>
        <div class="tit">
            <p>短信标题3</p>
            <a href="javascript:;">删除</a>
        </div>
        <div class="tit">
            <p>短信标题4</p>
            <a href="javascript:;">删除</a>
        </div>
        <div class="tit">
            <p>短信标题4</p>
            <a href="javascript:;">删除</a>
        </div>
        <div class="tit">
            <p>短信标题4</p>
            <a href="javascript:;">删除</a>
        </div>
        <div class="tit">
            <p>短信标题4</p>
            <a href="javascript:;">删除</a>
        </div>

    </div>
    <button id="btn">添加</button>

    <script>
        var box = document.getElementById('box');
        var btn = document.querySelector('#btn');

        touch.on(box,'swipe tap',function(e){

            var l = e.distanceX;

            if(l < -50){
                l = '-1rem';
            }else{
                l = 0;
            }
            this.parentNode.style.left = l;

            if(e.target.nodeName.toLowerCase() == 'a'){

                this.parentNode.style.left = 0;
                this.parentNode.style.transform = 'scaleY(0)';
                this.parentNode.style.background = 'red';

                setTimeout(function(){
                    e.target.parentNode.remove();
                },300)

            }

        })
        
        touch.on(btn,'tap',function(e){
            box.innerHTML += `<div class="tit">
                                <p>短信标题9</p>
                                <a href="javascript:;">删除</a>
                            </div>`;
        })


    </script>
</body>
</html>